<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {getLeftBottomData} from "@/api";
import {ElMessage} from "element-plus"
import ItemWrap from "@/components/item-wrap";
import {convertTime} from "@/utils/query-param";
import * as echarts from "echarts";


const title = ref("")
const data = ref({});
const chart_x = ref([]);
const chart_y = ref([]);
const option = ref({});
const getData = () => {
  getLeftBottomData().then((res) => {
    console.log("左中", res);

    if (res.code) {
      for (let item of res.data) {
        const value = JSON.parse(item.statisticalValue);
        switch (item.type) {
          case "title":
            title.value = value.data;
            break;
          case "data":
            data.value = value.data
            break;
        }
      }

      chart_x.value = data.value.map((item) => item.agent_name);
      chart_y.value = data.value.map((item) => convertTime(item.duration));
      let chartDom = document.getElementById('company_duration_chart');
      let myChart = echarts.init(chartDom);
      setOption()
      option && myChart.setOption(option.value);
    } else {
      ElMessage.error(res.msg)
    }
  }).catch(err => {
    ElMessage.error(err)
  });

};

const setOption =  () => {
  option.value = {

    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      axisLabel: {
        color: '#ffffff', // 设置X轴数字的颜色为红色
        fontSize: 16, // 设置字体大小
        fontFamily: 'Arial' // 设置字体类型
      }
    },
    yAxis: {
      type: 'category',
      data: chart_x.value,
      inverse: false,
      axisLabel: {
        color: '#ffffff', // 设置X轴数字的颜色为红色
        fontSize: 16, // 设置字体大小
        fontFamily: 'Arial', // 设置字体类型
        width: 150, // 设置Y轴标签的最大宽度
        overflow: 'truncate', // 超出宽度时的处理方式
        ellipsis: '...' // 超出时显示的省略号
      }
    },
    grid: {
      left: '30%', // 增加左侧空间
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params) {
        let tooltipContent = '';
        params.forEach(function (param) {
          tooltipContent += param.name + ': ' + '<br/>'+"" + param.value + '小时<br/>';
        });
        return tooltipContent;
      }
    },
    series: [
      {
        type: 'bar',
        data: chart_y.value,
        label: {
          show: true, // 显示数据标签
          position: 'right', // 数据标签的位置，可以是 'top', 'inside', 'outside' 等
          color: '#fff', // 数据标签的字体颜色
          fontSize: 12 // 数据标签的字体大小
        },
        itemStyle: {
          color: {
            type: 'linear', // 线性渐变
            x: 0, // 渐变起始点的x坐标
            y: 0, // 渐变起始点的y坐标
            x2: 0, // 渐变结束点的x坐标
            y2: 1, // 渐变结束点的y坐标
            colorStops: [ // 渐变颜色的停靠点
              { offset: 0, color: '#00f2ff' }, // 起始颜色（蓝色）
              { offset: 1, color: '#007eff' } // 结束颜色（深蓝色）
            ],
            global: false // 是否全局渐变
          },
          barBorderRadius: 5, // 柱的圆角
          borderColor: '#007eff', // 柱的边框颜色
          borderWidth: 1, // 柱的边框宽度
          borderType: 'solid' // 柱的边框类型为实线
        }
      }
    ]
  };

};
onMounted(() => {
  getData();

});
</script>

<template>
  <item-wrap :title='title'  style="height: 50px;" ></item-wrap>
  <div class="main-content">
    <div id="company_duration_chart" class="chart-wrap"/>
  </div>
</template>

<style scoped lang="scss">
.main-content{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center;
  background-color: #04102d90;
}
.chart-wrap {
  width: 100%;
  height: 100%;
}
</style>
